<template>
  <div class="Charge">
    <el-table
    :data="vipList"
    border
    style="width: 100%">
    <el-table-column
      align="center"
      label="产品图片"
      width="130">
      <template v-slot="{row}">
          <el-avatar shape="square"
          :size="80"
          fit="scale-down"
          :src="row.imageUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="productName"
      align="center"
      label="产品名称">
    </el-table-column>
    <el-table-column
      prop="description"
      align="center"
      label="产品描述">
    </el-table-column>
    <el-table-column
      prop="price"
      align="center"
      label="价格(元)">
    </el-table-column>
    <el-table-column
      prop="inventory"
      align="center"
      label="库存">
    </el-table-column>
    <el-table-column
      label="操作">
      <template v-slot="{row}">
            <el-button type="primary" @click="pre_order(row)"
            icon="iconfont icon-vip3">充值</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  
</template>
<script>
  import *as api from "@/api/pay"
  export default{
    data(){
      return{
        vipList:[]
      }
    },
    created() {
		this.getVipList()
	},
    methods:{
      getVipList() {
			api.getVipListApi()
				.then(res => {
          // console.log(res.data)
          this.vipList=res.data.data
        })
      },
      pre_order(row){
        // console.log(row)
        let {product_id}=row;
        
        this.$confirm('是否确定购买?'+row.description,"购买提示",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        })
        .then(()=>{
          this.$router.push({path:'/preorder',query:{product_id}})
        })
        .catch(()=>{
          this.$message({
            type: 'error',
            message: '已取消购买'
          });         
        })
      } 
    },
    meta:{
      title:"vipCharge",
      icon: "iconfont icon-chongzhi",
    }
  }
</script>